import React, { lazy, Suspense, useState } from 'react'
import './App.css'
import './app.scss'
import icon from './images/c234eca91e21345c72f49e3e68eef046.jpeg'
import './assets/iconfont/font_vhcjl05j9n/iconfont.css'
import memberList from './json/test.json'
import PreloadDemo from './components/PreloadDemo'

const LazyDemo = lazy(() => import('@/components/LazyDemo'))

// function App() {
//   // console.log(memberList);
//   const [show, setShow] = useState(false)
//   // 点击事件中动态引入css, 设置show为true
//   const handleOnClick = () => {
//     import('@/App.css')
//     setShow(true)
//   }
//   // return <div className='scssBox lessBox'>
//   //   <i className='iconfont icon-boluo'></i>
//   //   <img src={icon} alt="" style={{ width: '1000px', height: 'auto' }} />
//   //   <h2 className='box'>Hello han!</h2>
//   // </div>

//   return (
//     <>
//       <h2 onClick={handleOnClick}>展示</h2>
//       {/* show为true时加载LazyDemo组件 */}
//       {show && <Suspense fallback={null}><LazyDemo /></Suspense>}
//     </>
//   )
// }

// 资源预加载
const PreFetchDemo = lazy(
  () =>
    import(
      /* webpackChunkName: "PreFetchDemo" */
      /* webpackPrefetch: true */
      '@/components/PreFetchDemo'
    ),
)
function App() {
  const [show, setShow] = useState(false)
  const onClick = () => {
    setShow(true)
  }
  return (
    <>
      <h2 onClick={onClick}>展示</h2>
      {/* show为true时加载组件 */}
      {show && (
        <>
          <Suspense fallback={null}>
            <PreloadDemo />
          </Suspense>
          <Suspense fallback={null}>
            <PreFetchDemo />
          </Suspense>
        </>
      )}
    </>
  )
}

export default App
